<script>
import outMain from "@/components/outMain.vue";
import talkForm from "@/views/modules/talkForm.vue";

import { ElMessage, ElMessageBox } from "element-plus";
import {
  CrewhallDetail,
  biographicalNotesConnectRecord,
  associationPositionList,
  lookInfo,
  connectRecordSave,
} from "@/http/api";
export default {
  components: { outMain, talkForm },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      showTalk: false,
      maskItem: {},
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "船员证书", id: 2 },
        { name: "工作经历", id: 3 },
        { name: "沟通记录", id: 4 },
        { name: "备选岗位", id: 5 },
      ],
      stepId: 1,
      tableData: [],
      zsArr: [],
      expArr: [],
      queryData: {
        biographical_notes_id: this.$route.query.id,
        page: 1,
        per_page: 20,
      },
      total: 0,
      formData: {},
      showName: true,
      showMoble: true,
      showQQ: true,
    };
  },
  props: {},
  setup() {},
  methods: {
    openHiden(type) {
      let data = {
        biographical_notes_id: this.detailId,
        type: type,
      };
      lookInfo(data).then((res) => {
        if (res.data.code == 1) {
          if (type == 1) {
            this.formData.mobile = res.data.data;
            this.showMoble = false;
          } else if (type == 2) {
            this.formData.real_name = res.data.data;
            this.showName = false;
          } else if (type == 3) {
            this.formData.qq = res.data.data;
            this.showQQ = false;
          }
        }
      });
    },
    linkFn(url, id, navId) {
      if (id != 0) {
        this.$router.push({ path: url, query: { id: id, navId: navId } });
      }
    },
    getTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();

      const str = `${y}-${m}-${d}`;
      return str;
    },
    autoTime(time) {
      if (time.includes("T")) {
        return this.getTime(new Date(time));
      } else {
        return time;
      }
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id > 3) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId === 4) {
        this.getTalk();
      } else if (this.stepId === 5) {
        this.getLinkWork();
      }
    },
    getData() {
      CrewhallDetail({ biographical_notes_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          let cy_label = [];
          if (resData.cy_label) {
            cy_label = resData.cy_label.split(",");
          }
          let label_data = [];
          if (resData.label_data) {
            label_data = resData.label_data.split(",");
          }
          let all_label = cy_label.concat(label_data);
          if (all_label.length > 0) {
            resData["all_label"] = Array.from(new Set(all_label));
          } else {
            resData["all_label"] = [];
          }
          this.formData = resData;
          if (resData.zs_json) {
            this.zsArr = resData.zs_json.filter((item) => {
              return item.number;
            });
          }
          if (resData.resume_experience) {
            this.expArr = JSON.parse(resData.resume_experience);
          }
        }
      });
    },
    async getTalk() {
      const { data } = await biographicalNotesConnectRecord(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getLinkWork() {
      const { data } = await associationPositionList(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async comfirFn(formData) {
      const { data } = await connectRecordSave(formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "操作成功",
        });
        this.showTalk = false;
        this.serchFn();
      }
    },
    talkFn() {
      this.maskItem = {
        biographical_notes_id: this.detailId,
      };
      this.showTalk = true;
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船员详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">船员姓名</div>
                  <div class="desText textCenter">
                    {{ formData.real_name }}
                    <span
                      v-if="showName && formData.type != 2"
                      class="iconfont icon-yanjing"
                      @click="openHiden(2)"
                    ></span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船员年龄</div>
                  <div class="desText">
                    <span v-if="formData.age > 0">{{ formData.age }}岁</span>
                    <span v-else>- -</span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船员职务</div>
                  <div class="desText">{{ formData.zw }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">证书等级</div>
                  <div class="desText">
                    {{ formData.zs ? formData.zs : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">工作经验</div>
                  <div class="desText">
                    {{ formData.gzjy ? formData.gzjy + "年" : "- -" }}
                  </div>
                </div>

                <div class="desItem">
                  <div class="desName">船员学历</div>
                  <div class="desText">
                    {{ formData.xl ? formData.xl : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶类型</div>
                  <div class="desText">
                    {{ formData.cblx ? formData.cblx : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">航线要求</div>
                  <div class="desText">
                    {{ formData.hxyq ? formData.hxyq : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">期望月薪</div>
                  <div class="desText" v-if="formData.type != 3">
                    <span v-if="formData.qwyx == 0">- -</span>
                    <span v-if="formData.qwyx > 0"
                      >{{ formData.qwyx_dw == 1 ? "¥" : "$"
                      }}{{ formData.qwyx }}</span
                    >
                  </div>
                  <div class="desText" v-if="formData.type == 3">
                    <span>{{ formData.qwyx }}</span>
                  </div>
                </div>
                <div class="desItem" v-if="formData.zqdc_time">
                  <div class="desName">择期登船</div>
                  <div class="desText">
                    {{ formData.zqdc_time || "- -" }}
                  </div>
                </div>
                <div class="desItem" v-if="formData.gj">
                  <div class="desName">船员国籍</div>
                  <div class="desText">
                    {{ formData.gj ? formData.gj : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">所在地</div>
                  <div class="desText">
                    {{ formData.jg ? formData.jg : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">出生地</div>
                  <div class="desText">
                    {{ formData.csd ? formData.csd : "- -" }}
                  </div>
                </div>
                <div class="desItem" v-if="formData.type == 1">
                  <div class="desName">船员状态</div>
                  <div class="desText">
                    {{
                      formData.user_zz_status ? formData.user_zz_status : "- -"
                    }}
                  </div>
                </div>
                <div class="desItem" v-if="formData.all_label">
                  <div class="desName">船员标签</div>
                  <div class="desText" v-if="formData.all_label.length > 0">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="formData.all_label.join(',')"
                      placement="top-start"
                    >
                      <el-tag>{{
                        formData.all_label.length + "个标签"
                      }}</el-tag>
                    </el-tooltip>
                  </div>
                  <div class="desText" v-if="formData.all_label.length == 0">
                    <el-tag>暂无标签</el-tag>
                  </div>
                </div>

                <div class="desItem" v-if="formData.mobile">
                  <div class="desName">手机号</div>
                  <div class="desText textCenter">
                    {{ formData.mobile ? formData.mobile : "- -" }}
                    <span
                      v-if="showMoble && formData.type != 2"
                      class="iconfont icon-yanjing"
                      @click="openHiden(1)"
                    ></span>
                  </div>
                </div>
                <div class="desItem" v-if="formData.type == 3">
                  <div class="desName">QQ号</div>
                  <div class="desText textCenter">
                    {{ formData.qq ? formData.qq : "- -" }}
                    <span
                      v-if="showQQ && formData.type != 2"
                      class="iconfont icon-yanjing"
                      @click="openHiden(3)"
                    ></span>
                  </div>
                </div>
                <div class="desItem" v-if="formData.idcard">
                  <div class="desName">身份证号</div>
                  <div class="desText">
                    {{ formData.idcard ? formData.idcard : "- -" }}
                  </div>
                </div>
                <div class="desItem" v-if="formData.type == 2">
                  <div class="desName">录入员工</div>
                  <div class="desText">
                    <span
                      :class="formData.lr_staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('staffListDetail', formData.lr_staff_id)"
                    >
                      {{ formData.lr_staff_name }}
                    </span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">更新时间</div>
                  <div class="desText">{{ formData.update_time }}</div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="formData.jl_remark">
              <div class="desTitle">简历备注</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desText">{{ formData.jl_remark }}</div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="formData.zs_file">
              <div class="desTitle">证件照</div>
              <div class="desCont">
                <div
                  class="desImgItem"
                  :key="index"
                  v-for="(item, index) in formData.zs_file.split(',')"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    fit="cover"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>船员证书</div>
              </div>
              <el-table
                class="tableMain"
                :data="zsArr"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  show-overflow-tooltip
                  label="证书名称"
                />
                <el-table-column
                  prop="number"
                  show-overflow-tooltip
                  label="证书编号"
                />
                <el-table-column
                  prop="time"
                  show-overflow-tooltip
                  label="到期时间"
                >
                  <template #default="{ row }">{{
                    autoTime(row.time)
                  }}</template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>工作经历</div>
              </div>
              <el-table
                class="tableMain"
                :data="expArr"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="comName"
                  show-overflow-tooltip
                  label="公司"
                />
                <el-table-column prop="zw" show-overflow-tooltip label="职务" />
                <el-table-column prop="cm" show-overflow-tooltip label="船名" />
                <el-table-column prop="cx" show-overflow-tooltip label="船型" />
                <el-table-column prop="hx" show-overflow-tooltip label="航区" />
                <el-table-column prop="zd" show-overflow-tooltip label="总吨" />
                <el-table-column prop="ml" show-overflow-tooltip label="马力" />
                <el-table-column
                  prop="scsj"
                  show-overflow-tooltip
                  label="上船时间"
                />
                <el-table-column
                  prop="xcsj"
                  show-overflow-tooltip
                  label="下船时间"
                />
              </el-table>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 4">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>沟通此船员的记录（{{ total }}）</div>
                <btn value="新增沟通记录" @ok="talkFn"></btn>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  label="沟通时间"
                />
                <el-table-column
                  prop="staff_name"
                  show-overflow-tooltip
                  label="沟通员工"
                >
                  <template #default="{ row }">
                    <span
                      :class="row.staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('staffListDetail', row.staff_id)"
                    >
                      {{ row.staff_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="connect_remark"
                  show-overflow-tooltip
                  label="沟通备注"
                />
                <el-table-column
                  prop="connect_label"
                  show-overflow-tooltip
                  label="沟通标签"
                />
                <el-table-column
                  prop="last_connect_time"
                  show-overflow-tooltip
                  label="下次沟通时间提醒"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 5">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">此船员备选的岗位（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="position_name"
                  show-overflow-tooltip
                  label="岗位职务"
                >
                  <template #default="{ row }">
                    <span
                      :class="
                        row.enterprise_position_id == 0 ? '' : 'linkText_'
                      "
                      @click="
                        linkFn('workListDetail', row.enterprise_position_id)
                      "
                    >
                      {{ row.position_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="watercraft_name"
                  show-overflow-tooltip
                  label="船名"
                />
                <el-table-column
                  prop="workMoney"
                  show-overflow-tooltip
                  label="岗位月薪"
                >
                  <template #default="{ row }">
                    {{ row.unit == 1 ? "¥" : "$" }}{{ row.start_monry }}~{{
                      row.end_monry
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="staff_name"
                  show-overflow-tooltip
                  label="操作员工"
                >
                  <template #default="{ row }">
                    <span
                      :class="row.staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('staffListDetail', row.staff_id)"
                    >
                      {{ row.staff_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="showTalk" title="新增船员沟通" width="600">
      <div class="dialogMaskCont">
        <talkForm
          @cancel="showTalk = false"
          @ok="comfirFn"
          :maskItem="maskItem"
        ></talkForm>
      </div>
    </el-dialog>
  </outMain>
</template>
<style scoped lang="less"></style>
